<template>
  <div class="count-component">
    <!-- 上部的搜索框 -->
    <div class="search-part">
      <el-input v-model="searchInput" size="large" placeholder="请输入图层名称" />
    </div>
    <el-tree class="self-tree-L1 self-tree" ref="layerTree" :filter-node-method="filterTreeNode" default-expand-all @node-click="NodeClickFn"
      @check="NodeCheckFn" empty-text="暂无数据" :data="dataSource" :props="{
        label: 'label'
      }" show-checkbox :default-expand-all="false" node-key="id" :expand-on-click-node="false">
      <template #default="{ node, data }">
        <span class="custom-tree-node">
          <!-- 标题部分 -->
          <span class="title-area">
            {{ node.label }}
          </span>
          <span class="node-counts" v-if="!node.isLeaf">
            [{{ data.children.length }}]
          </span>
        </span>
      </template>
    </el-tree>
  </div>
</template>
<script>
import Api from '@/api';
import eventBus from '@/utils/eventBus.js'
import { ElMessage } from 'element-plus'
import {
  maxBy as LodashMaxBy,
  sortBy as LodashSortBy,
  chunk as Lodashchunk,
  minBy as LodashMinBy,
  flatten as LodashFlatten
} from "lodash";
let LayerMap = {};
// 颜色表
// 污染物的聚合图层
let insOfMarkerClusterGroupWuRanWu = L.markerClusterGroup({
  spiderfyOnMaxZoom: false,
  showCoverageOnHover: false,
  zoomToBoundsOnClick: false,
  maxClusterRadius: 100,
});
// 地质灾害的聚合图层
let insOfMarkerClusterGroupDiZhiZaiHai = L.markerClusterGroup({
  spiderfyOnMaxZoom: false,
  showCoverageOnHover: false,
  zoomToBoundsOnClick: false,
  maxClusterRadius: 40,
});
// 岸电桩的聚合图层
let insOfMarkerClusterGroupAnDianZhuang = L.markerClusterGroup({
  spiderfyOnMaxZoom: false,
  showCoverageOnHover: false,
  zoomToBoundsOnClick: false,
  maxClusterRadius: 40,
});
// 天气的聚合图层
let insOfMarkerClusterGroupWeather = L.markerClusterGroup({
  spiderfyOnMaxZoom: false,
  showCoverageOnHover: false,
  zoomToBoundsOnClick: false,
  maxClusterRadius: 40,
});
// 整治建筑物的聚合图层
let insOfMarkerClusterGroupZZJZW = L.markerClusterGroup({
  spiderfyOnMaxZoom: false,
  showCoverageOnHover: false,
  zoomToBoundsOnClick: false,
  maxClusterRadius: 100,
});
export default {
  name: "TreeOfL1",
  components: {},
  props: {},
  data() {
    return {
      searchInput: "",
      dataSource: [{
        label: "航运服务",
        id: "hangyun-service",
        disabled: true,
        children: [{
          label: '洗舱站',
          id: 'xi-cang-zhan'
        },
        {
          label: '加油站',
          id: 'jia-you-zhan'
        },
        {
          label: '服务区',
          id: 'fu-wu-qu'
        }, {
          label: '岸电桩',
          id: 'andian'
        },
        {
          label: '污染物',
          id: 'wu-ran-wu'
        }
        ]
      }, {
        label: "航道资源",
        id: "hangdao-resources",
        disabled: true,
        children: [{
          label: "整治建筑物",
          id: "zhengzhi-building"
        }, {
          label: "应急管理机构",
          id: "yingji-apartment",
        }, {
          label: '通航水域',
          id: 'area-of-water'
        }]
      }, {
        label: "专题服务",
        id: "special-services",
        disabled: true,
        children: [{
          label: '船舶热力图',
          id: 'heatmap-of-ship'
        }, {
          label: '航路路况',
          id: 'hangwu-lukuang'
        }, {
          label: '断面流量',
          id: 'duanmian-liuliang'
        }, {
          label: '航道通行状态',
          id: 'channel-open-status'
        }, {
          label: '航道设施状态',
          id: 'channel-equip-status'
        }]
      }, {
        label: "安全预警",
        id: "pre-alarm",
        disabled: true,
        children: [{
          label: '地质灾害',
          id: 'di-zhi-zai-hai'
        }, {
          label: '沿江极端天气',
          id: 'weather-report'
        }, {
          label: '应急事件',
          id: 'yingji-shijian'
        }, {
          label: '航标碰撞',
          id: 'hangbiao-pengzhuang'
        }]
      }
      ]
    };
  },
  computed: {},
  created() { },
  watch: {
    searchInput(v) {
      const layerTree = this.$refs["layerTree"];
      if (layerTree) {
        layerTree.filter(v);
      }
    }
  },
  mounted() {
    this.getLayerMap();
  },
  beforeUnmount() {
    const that = this;
    LayerMap = {};
    eventBus.off("requestDataForLeaflet");
    eventBus.off("showLegendOfL1");
    window.LeafletMapInsOfL1 &&
      window.LeafletMapInsOfL1.off("zoomend", that.listenZoomForLuKuang);
  },
  methods: {
    // 树节点过滤器
    filterTreeNode(value, data) {
      if (!value) return true;
      return data.label.includes(value);
    },
    getLayerMap() {
      // 存储实例图层
    },
    NodeClickFn() { },
    NodeCheckFn(node, status) {
      const that = this;
      const keysSelected = this.$refs["layerTree"].getCheckedKeys();
      eventBus.emit("toggleDemarcationPoint", {
        tag: !Boolean(keysSelected.length),
      });
      eventBus.emit("showLegendOfL1", {
        tag: false,
      });

      const tag = !!~keysSelected.indexOf(node.id);
      switch (node.id) {
        // 洗舱站 ok
        case "xi-cang-zhan":
          if (tag) {
            if (LayerMap[node.id]) {
              return;
            }
            this.renderXiCangLayer();
          } else {
            if (LayerMap[node.id]) {
              LayerMap[node.id].remove();
              LayerMap[node.id] = null;
            }
          }
          break;
        // 加油站 ok
        case "jia-you-zhan":
          if (tag) {
            if (LayerMap[node.id]) {
              return;
            }
            this.renderJiaYouZhanLayer();
          } else {
            if (LayerMap[node.id]) {
              LayerMap[node.id].remove();
              LayerMap[node.id] = null;
            }
          }
          break;
        // 岸电桩 ok
        case "andian":
          if (tag) {
            if (LayerMap[node.id]) {
              return;
            }
            this.renderAnDianLayer();
          } else {
            if (LayerMap[node.id]) {
              LayerMap[node.id].clearLayers();
              LayerMap[node.id] = null;
            }
          }
          break;
        // 服务区 ok
        case "fu-wu-qu":
          if (tag) {
            if (LayerMap[node.id]) {
              return;
            }
            this.renderFuWuQuLayer();
          } else {
            if (LayerMap[node.id]) {
              LayerMap[node.id].remove();
              LayerMap[node.id] = null;
            }
          }
          break;
        // 污染物 notok
        case "wu-ran-wu":
          if (tag) {
            if (LayerMap[node.id]) {
              return;
            }
            this.renderWuRanWuLayer();
          } else {
            if (LayerMap[node.id]) {
              LayerMap[node.id].clearLayers();
              LayerMap[node.id] = null;
            }
          }
          break;
        // 整治建筑物 ok
        case "zhengzhi-building":
          if (tag) {
            if (LayerMap[node.id]) {
              return;
            }
            this.renderZhengZhiBuildingLayer();
          } else {
            if (LayerMap[node.id]) {
              LayerMap[node.id].clearLayers();
              LayerMap[node.id] = null;
            }
          }
          break;
        // 通航水域
        case "area-of-water":
          if (tag) {
            if (LayerMap[node.id]) {
              return;
            }
            this.renderAreaOfWaterLayer();
          } else {
            if (LayerMap[node.id]) {
              LayerMap[node.id].remove();
              LayerMap[node.id] = null;
            }
          }
          break;
        // 船舶热力图展示 ok
        case "heatmap-of-ship":
          // if (tag) {
          //   this.$store.commit('SET_HEAT_MAP_SWITCH_OF_SHIP', {
          //     data: true
          //   })
          // } else {
          //   this.$store.commit('SET_HEAT_MAP_SWITCH_OF_SHIP', {
          //     data: false
          //   })
          // }
          if (tag) {
            if (LayerMap[node.id]) {
              return;
            }
            this.renderHeatMapLayerArea();
          } else {
            if (LayerMap[node.id]) {
              LayerMap[node.id].remove();
              LayerMap[node.id] = null;
              LayerMap['heatmap-of-ship-point'].remove();
              LayerMap['heatmap-of-ship-point'] = null;
              window.LeafletMapInsOfL1 && window.LeafletMapInsOfL1.off("zoomend", that.listenZoomForLuKuang)
            }
          }
          break;
        // 地址灾害点
        case "di-zhi-zai-hai":
          if (tag) {
            if (LayerMap[node.id]) {
              return;
            }
            this.renderDiZhiZaiHaiLayer();
          } else {
            if (LayerMap[node.id]) {
              LayerMap[node.id].clearLayers();
              LayerMap[node.id] = null;
            }
          }
          break;
        // 应急管理机构
        case "yingji-apartment":
          if (tag) {
            if (LayerMap[node.id]) {
              return;
            }
            this.renderYingJiGuanLiLayer();
          } else {
            if (LayerMap[node.id]) {
              LayerMap[node.id].clearLayers();
              LayerMap[node.id] = null;
            }
          }
          break;
        // 天气数据展现
        case 'weather-report':
          if (tag) {
            if (LayerMap[node.id]) { return }
            this.renderWeatherReportLayer();
          } else {
            if (LayerMap[node.id]) {
              LayerMap[node.id] && LayerMap[node.id].remove();
              LayerMap[node.id] = null;
            }
          }
          break;
        // 航路路况
        case 'hangwu-lukuang':
          if (tag) {
            if (LayerMap[node.id]) { return }
            this.renderHangLuLuKuangLayer();
          } else {
            if (LayerMap[node.id]) {
              LayerMap[node.id].remove();
              LayerMap[node.id] = null;
              window.LeafletMapInsOfL1 && window.LeafletMapInsOfL1.off("zoomend", that.listenZoomForLuKuang)
            }
          }
          break;
        // 断面流量
        case "duanmian-liuliang":
          if (tag) {
            if (LayerMap[node.id]) {
              return;
            }
            this.renderDuanmianLiuliangLayer();
          } else {
            if (LayerMap[node.id]) {
              LayerMap[node.id].remove();
              LayerMap[node.id] = null;
              window.LeafletMapInsOfL1 &&
                window.LeafletMapInsOfL1.off(
                  "zoomend",
                  that.listenZoomForLuKuang
                );
            }
          }
          break;
        // 航道通行状态
        case 'channel-open-status':
          if (tag) {
            if (LayerMap[node.id]) {
              return;
            }
            this.renderChannelOpenStatusLayer();
            eventBus.emit("showLegendOfL1", {
              tag: true,
              section: 'open-status'
            });
          } else {
            if (LayerMap[node.id]) {
              LayerMap[node.id].remove();
              LayerMap[node.id] = null;
              window.LeafletMapInsOfL1 &&
                window.LeafletMapInsOfL1.off(
                  "zoomend",
                  that.listenZoomForLuKuang
                );
              eventBus.emit("showLegendOfL1", {
                tag: false
              });
            }
          }
          break;
        // 航道设施状态
        case 'channel-equip-status':
          if (tag) {
            if (LayerMap[node.id]) {
              return;
            }
            this.renderChannelEquipStatusLayer();
            eventBus.emit("showLegendOfL1", {
              tag: true,
              section: 'equip-status'
            });
          } else {
            if (LayerMap[node.id]) {
              LayerMap[node.id].remove();
              LayerMap[node.id] = null;
              window.LeafletMapInsOfL1 &&
                window.LeafletMapInsOfL1.off(
                  "zoomend",
                  that.listenZoomForLuKuang
                );
              eventBus.emit("showLegendOfL1", {
                tag: false
              });
            }
          }
          break;
        // 应急事件
        case 'yingji-shijian':
          if (tag) {
            if (LayerMap[node.id]) { return }
            this.renderYingjiShijianLayer();
          } else {
            if (LayerMap[node.id]) {
              LayerMap[node.id].remove();
              LayerMap[node.id] = null;
              window.LeafletMapInsOfL1 && window.LeafletMapInsOfL1.off("zoomend", that.listenZoomForLuKuang)
            }
          }
          break;
        // 航标碰撞
        case 'hangbiao-pengzhuang':
          if (tag) {
            if (LayerMap[node.id]) { return }
            this.renderHangBiaoPengzhuangLayer();
          } else {
            if (LayerMap[node.id]) {
              LayerMap[node.id].remove();
              LayerMap[node.id] = null;
              window.LeafletMapInsOfL1 && window.LeafletMapInsOfL1.off("zoomend", that.listenZoomForLuKuang)
            }
          }
          break;
      }
    },
    // 洗舱站 ok
    renderXiCangLayer() {
      Api.getDataOfXiCang().then((res) => {
        if (!res.length) {
          return;
        }
        if (!L) {
          return;
        }
        if (!window.LeafletMapInsOfL1) {
          return;
        }
        const markers = [];
        for (let i = 0; i < res.length; i++) {
          const item = res[i];
          const currentMarker = L.marker([item.lat, item.lon], {
            icon: L.icon({
              iconUrl: "./files/images/icon-xicangzhan.png",
              iconSize: [40, 40],
              iconAnchor: [20, 40],
            }),
          });
          markers.push(currentMarker);

          currentMarker.bindPopup(`
              <div class="leaflet-self-wrapper">
                <div class="header">${item.stationName || ""}</div>
                <div class="leaflet-self-wrapper-item serverInfo"><span class="bolder">地址</span>:
                     <div class="wrapper-indent">
                   ${item.address || ""}
                   </div>
                   </div>
                <div class="leaflet-self-wrapper-item"><span class="bolder">联系人</span>: ${item.link || ""
            }</div>
                <div class="leaflet-self-wrapper-item serverInfo"><span class="bolder">服务说明</span>: 
                <div class="wrapper-indent">
                 ${item.serviceItems}
               </div>
               </div>
                </div>
            `);
        }
        // layer
        LayerMap["xi-cang-zhan"] = L.layerGroup(markers).addTo(
          window.LeafletMapInsOfL1
        );
      });
    },
    // 加油站 ok
    renderJiaYouZhanLayer() {
      Api.getDataOfJiaYouZhan().then((res) => {
        if (!res.length) {
          return;
        }
        if (!L) {
          return;
        }
        if (!window.LeafletMapInsOfL1) {
          return;
        }
        const markers = [];
        for (let i = 0; i < res.length; i++) {
          const item = res[i];
          const currentMarker = L.marker([item.lat, item.lon], {
            icon: L.icon({
              iconUrl: "./files/images/icon-jiayouzhan.png",
              iconSize: [40, 40],
              iconAnchor: [20, 40],
            }),
          });
          markers.push(currentMarker);
          currentMarker.bindPopup(`
              <div class="leaflet-self-wrapper">
                 <div class="header">${item.stationName || ""}</div>
                <div class="leaflet-self-wrapper-item serverInfo"><span class="bolder">地址</span>:
                    <div class="wrapper-indent">
                   ${item.address || ""}
                   </div>
                   </div>
                <div class="leaflet-self-wrapper-item serverInfo"><span class="bolder">汽油类型</span>:
                   <div class="wrapper-indent">
                   ${item.petrolType || ""}
                   </div>
                  </div>
              </div>
            `);
        }
        // layer
        LayerMap["jia-you-zhan"] = L.layerGroup(markers).addTo(
          window.LeafletMapInsOfL1
        );
      });
    },
    // 服务区 ok
    renderFuWuQuLayer() {
      Api.getDataOfFuWuQu().then((res) => {
        if (!res.length) {
          return;
        }
        if (!L) {
          return;
        }
        if (!window.LeafletMapInsOfL1) {
          return;
        }
        const markers = [];
        for (let i = 0; i < res.length; i++) {
          const item = res[i];
          const currentMarker = L.marker([item.lat, item.lon], {
            icon: L.icon({
              iconUrl: "./files/images/icon-fuwu.png",
              iconSize: [40, 40],
              iconAnchor: [20, 40],
            }),
          });
          markers.push(currentMarker);
          currentMarker.bindPopup(`
              <div class="leaflet-self-wrapper">
                <div class="header"><span class="bolder">${item.dept || ""}</span>
                   </div>
                <div class="leaflet-self-wrapper-item serverInfo"><span class="bolder">里程</span>:
                    <div class="wrapper-indent">
                   ${item.licheng || ""}
                   </div>
                   </div>
                <div class="leaflet-self-wrapper-item"><span class="bolder">联系人</span>: ${item.linkMan || ""
            }</div>
                <div class="leaflet-self-wrapper-item"><span class="bolder">联系电话</span>: ${item.link || ""
            }</div>
              </div>
            `);
        }
        // layer
        LayerMap["fu-wu-qu"] = L.layerGroup(markers).addTo(
          window.LeafletMapInsOfL1
        );
      });
    },
    // 岸电桩 ok
    renderAnDianLayer() {
      Api.getDataOfAnDian().then((res) => {
        if (!res.length) {
          return;
        }
        if (!L) {
          return;
        }
        if (!window.LeafletMapInsOfL1) {
          return;
        }
        for (let i = 0; i < res.length; i++) {
          const item = res[i];
          const currentMarker = L.marker([item.lat, item.lon], {
            icon: L.icon({
              iconUrl: "./files/images/icon-andian.png",
              iconSize: [40, 40],
              iconAnchor: [20, 40],
            }),
          });
          insOfMarkerClusterGroupAnDianZhuang.addLayer(currentMarker);
          currentMarker.bindPopup(`
              <div class="leaflet-self-wrapper">
                 <div class="header">${item.bwmc || ""}</div>
                 <div class='pop_content'>
                  <div class="leaflet-self-wrapper-item serverInfo"><span class="bolder" style="width: 110px;">码头名称</span>:
                   ${item.mtmc || ""}
                   </div>
                <div class="leaflet-self-wrapper-item"><span class="bolder" style="width: 110px;">码头位置</span>: ${item.mtwz || ""
            }</div>
                <div class="leaflet-self-wrapper-item"><span class="bolder" style="width: 110px;">岸电桩电流(A)</span>: ${item.adxdl || ""
            }</div>
                <div class="leaflet-self-wrapper-item"><span class="bolder" style="width: 110px;">岸电桩电压(V)</span>: ${item.bsdy || ""
            }</div>
                <div class="leaflet-self-wrapper-item"><span class="bolder" style="width: 110px;">岸电桩容量(KW)</span>: ${item.adxrl || ""
            }</div>
            </div>
                
              </div>
            `);
        }
        LayerMap["andian"] = insOfMarkerClusterGroupAnDianZhuang.addTo(
          window.LeafletMapInsOfL1
        );
      });
    },
    // 污染物
    renderWuRanWuLayer() {
      Api.getDataOfWuRanWu().then(res => {
        if (!res || !res.features.length) { return }
        if (!L) { return }
        if (!window.LeafletMapInsOfL1) { return }
        for (let i = 0; i < res.features.length; i++) {
          const item = res.features[i].properties;
          // 中心位置可能不存在
          if (!res.features[i].geometry.coordinates) {
            continue
          }
          // const position = item.CENTER.replace('POINT', '').replace('(', '').replace(')', '')
          // const positionSplit = position.split(' ');
          const position = res.features[i].geometry.coordinates;
          const currentMarker = L.marker([position[1], position[0]], {
            icon: L.icon({
              iconUrl: "./files/images/icon-wuranwu.png",
              iconSize: [40, 40],
              iconAnchor: [20, 40],
            }),
          });
          insOfMarkerClusterGroupWuRanWu.addLayer(currentMarker)
          currentMarker
            .bindPopup(`
              <div class="leaflet-self-wrapper">
                 <div class="header">${item.AREA_NAME || ""}</div>
                <div class="leaflet-self-wrapper-item "><span class="bolder itemWord">污染物类型</span>: ${item.PURPOSE || ""
              }</div>
                <div class="leaflet-self-wrapper-item serverInfo"><span class="bolder itemWord">所属公司</span>:
                    <div class="wrapper-indent">
                   ${item.COM_NO_CN || ""}
                   </div>
                   </div>
              </div>
            `);
        }
        // layer
        LayerMap["wu-ran-wu"] = insOfMarkerClusterGroupWuRanWu.addTo(
          window.LeafletMapInsOfL1
        );
      });
    },
    // 整治建筑物
    renderZhengZhiBuildingLayer() {
      Api.getZhengZhiBuilding().then((res) => {
        if (!res || !res.features.length) {
          return;
        }
        if (!L) {
          return;
        }
        if (!window.LeafletMapInsOfL1) {
          return;
        }
        const markers = [];
        for (let i = 0; i < res.features.length; i++) {
          const item = res.features[i];
          const properties = item.properties;
          // 中心位置可能不存在
          if (!item.geometry) {
            continue;
          }
          const position = item.geometry.coordinates;
          const currentMarker = L.marker([position[1], position[0]], {
            icon: L.icon({
              iconUrl: "./files/images/icon-zhengzhijianzhu.png",
              iconSize: [40, 40],
              iconAnchor: [20, 40],
            }),
          });
          insOfMarkerClusterGroupZZJZW.addLayer(currentMarker)
          // markers.push(currentMarker);
          currentMarker.bindPopup(`
              <div class="leaflet-self-wrapper">
                 <div class="header">${properties["整治建筑物名称"] || ""
            }</div>
                <div class="leaflet-self-wrapper-item"><span class="bolder">类别</span>: ${properties["类别"] || ""
            }</div>
                <div class="leaflet-self-wrapper-item"><span class="bolder">状态</span>: ${properties["状态"] || ""
            }</div>
                <div class="leaflet-self-wrapper-item"><span class="bolder">所在地</span>: ${properties["所在地"] || ""
            }</div>
                <div class="leaflet-self-wrapper-item"><span class="bolder">所在水道</span>: ${properties["所在水道"] || ""
            }</div>
                <div class="leaflet-self-wrapper-item"><span class="bolder">通航里程</span>: ${properties["通航里程"] || ""
            }</div>
                <div class="leaflet-self-wrapper-item"><span class="bolder">岸别</span>: ${properties["岸别"] || ""
            }</div>
                <div class="leaflet-self-wrapper-item"><span class="bolder">维护单位</span>: ${properties["维护单位"] || ""
            }</div>
              </div>
            `);
        }
        // layer
        LayerMap["zhengzhi-building"] = insOfMarkerClusterGroupZZJZW.addTo(
          window.LeafletMapInsOfL1
        );
      });
    },
    // 水域面
    renderAreaOfWaterLayer() {
      Api.getAreaOfWater().then((res) => {
        if (!res || !res.features.length) {
          return;
        }
        if (!L) {
          return;
        }
        if (!window.LeafletMapInsOfL1) {
          return;
        }
        const layers = [];
        for (let i = 0; i < res.features.length; i++) {
          const item = res.features[i];
          const properties = item.properties;
          const tempLayer = L.geoJSON(item, {
            style: function () {
              return {
                stroke: false,
                fill: true,
                fillColor: "#ffd700",
                opacity: 1,
                fillOpacity: 0.5,
                className: "AreaWaterSVGClass",
              };
            },
          });
          layers.push(tempLayer);
          // ${properties["SHAPE_Leng"] ? (properties["SHAPE_Leng"] * 1000).toFixed(3) : ""}
          tempLayer.bindPopup(`
              <div class="leaflet-self-wrapper">
                <div class="leaflet-self-wrapper-item">${properties["NOBJNM"] || ""
            }</div>
              </div>
            `);
        }
        LayerMap["area-of-water"] = L.layerGroup(layers).addTo(
          window.LeafletMapInsOfL1
        );
      });
    },
    // 地质灾害
    renderDiZhiZaiHaiLayer() {
      Api.getDiZhiZaiHai().then((res) => {
        if (!res || !res.features.length) {
          return;
        }
        if (!L) {
          return;
        }
        if (!window.LeafletMapInsOfL1) {
          return;
        }
        const markers = [];
        for (let i = 0; i < res.features.length; i++) {
          const item = res.features[i];
          const properties = item.properties;
          // 中心位置可能不存在
          if (!item.geometry) {
            continue;
          }
          const position = item.geometry.coordinates;
          const currentMarker = L.marker([position[1], position[0]], {
            icon: L.icon({
              iconUrl: "./files/images/icon-dizhizaihai.png",
              iconSize: [40, 40],
              iconAnchor: [20, 40],
            }),
          });
          insOfMarkerClusterGroupDiZhiZaiHai.addLayer(currentMarker);
          currentMarker.bindPopup(`
              <div class="leaflet-self-wrapper">
                 <div class="header">地址灾害</div>
                <div class="leaflet-self-wrapper-item serverInfo"><span class="bolder" style="width: 100px;">灾害点名称</span>:
                    <div class="wrapper-indent">
                  ${properties["NAME"] || ""}
                   </div>
                  </div>
                <div class="leaflet-self-wrapper-item"><span class="bolder" style="width: 100px;">水道名称</span>: ${properties["CHANNEL_NAME"] || ""
            }</div>
              </div>
            `);
        }
        LayerMap["di-zhi-zai-hai"] = insOfMarkerClusterGroupDiZhiZaiHai.addTo(
          window.LeafletMapInsOfL1
        );
      });
    },
    // 应急管理机构
    renderYingJiGuanLiLayer() {
      Api.getYingJiGuanLi().then((res) => {
        if (!res || !res.Sheet.length) {
          return;
        }
        if (!L) {
          return;
        }
        if (!window.LeafletMapInsOfL1) {
          return;
        }
        for (let i = 0; i < res.Sheet.length; i++) {
          const item = res.Sheet[i];
          // 位置可能不存在
          if (!item.lon || !item.lat) {
            continue;
          }
          const currentMarker = L.marker([item.lat, item.lon], {
            icon: L.icon({
              iconUrl: "./files/images/icon-yingjiguanli.png",
              iconSize: [40, 40],
              iconAnchor: [20, 40],
            }),
          });
          insOfMarkerClusterGroupDiZhiZaiHai.addLayer(currentMarker);
          currentMarker.bindPopup(`
              <div class="leaflet-self-wrapper">
                   <div class="header"> ${item["name"] || ""
            }</div>
                
                <div class="leaflet-self-wrapper-item serverInfo"><span class="bolder">地址</span>:
                    <div class="wrapper-indent">
                    ${item["address"] || ""}
                   </div>
                   </div>
                <div class="leaflet-self-wrapper-item"><span class="bolder">联系人</span>: ${item["lxr"] || ""
            }</div>
              </div>
            `);
        }
        LayerMap["yingji-apartment"] = insOfMarkerClusterGroupDiZhiZaiHai.addTo(
          window.LeafletMapInsOfL1
        );
      });
    },
    // 预警信息（天气信息）展现
    async renderWeatherReportLayer() {
      const tempRes = await Api.getPredictWeatherDataOfYangz();
      if (!tempRes.success) { return }
      if (!tempRes.data) { return }
      if (!tempRes.data.data) { return }
      const finalData = tempRes.data.data;
      const markers = []
      for (let i = 0; i < finalData.length; i++) {
        const item = finalData[i];
        const currentMarker = L.marker([item.station_lat, item.station_lon], {
          icon: L.icon({
            iconUrl: './files/images/icon-weather-alarm.png',
            iconSize: [30, 30],
            iconAnchor: [15, 30],
          })
        });
        markers.push(currentMarker)
        currentMarker
          .bindPopup(`
              <div class="leaflet-self-wrapper">
                 <div class="header">${item['title'] || ""}</div>
                <div class="leaflet-self-wrapper-item serverInfo"><span class="bolder">说明</span>: 
                  <div class="wrapper-indent">
                  ${item.content || ""}
                  </div>
                </div>
                <div class="leaflet-self-wrapper-item"><span class="bolder">发布时间</span>: ${item["pub_date"] || ""}</div>
              </div>
            `);
      }
      LayerMap['weather-report'] = L.layerGroup(markers).addTo(window.LeafletMapInsOfL1)
    },
    // 天气数据展现
    async renderWeatherReportLayerOld() {
      // 极端天气
      // 大雾 暴雪 大雪 特大暴雨 大暴雨 暴雨 大雨
      const extreWeather = ['18', '17', '16', '12', '11', '10', '9'];
      // 天气站
      const resOfStationtDict = await Api.geWeatherStationtDict();
      // 具体的天气
      const resOfWeather = await Api.getWeatherDataOfArea();
      const weatherMap = {
        "0": "./files/images/icon-weather-qing.png",
        "1": "./files/images/icon-weather-duoyun.png",
        "2": "./files/images/icon-weather-yin.png",
        "3": "./files/images/icon-weather-shaoyun.png",
        "4": "./files/images/icon-weather-xiaoyu.png",
        "5": "./files/images/icon-weather-xiaoxue.png",
        "6": "./files/images/icon-weather-yujiaxue.png",
        "7": "./files/images/icon-weather-xiaoyu-1.png",
        "8": "./files/images/icon-weather-zhongyu.png",
        "9": "./files/images/icon-weather-dayu.png",
        "10": "./files/images/icon-weather-baoyu.png",
        "11": "./files/images/icon-weather-dabaoyu.png",
        "12": "./files/images/icon-weather-tedabaoyu.png",
        "13": "./files/images/icon-weather-weizhi.png",
        "14": "./files/images/icon-weather-xiaoxue-1.png",
        "15": "./files/images/icon-weather-xue.png",
        "16": "./files/images/icon-weather-daxue.png",
        "17": "./files/images/icon-weather-baoxue.png",
        "18": "./files/images/icon-weather-dawu.png",
        default: "./files/images/icon-weather-weizhi.png"
      }
      if (resOfWeather.data && resOfWeather.data.data && resOfWeather.data.data.length) {
        // 过滤出极端天气数据
        const finalData = resOfWeather.data.data.filter(v => {
          // 有站点数据
          return v.station_id && resOfStationtDict[v.station_id]
        }).filter(v => {
          // 极端天气包含风力
          return !!~extreWeather.indexOf(v.weather_code) || parseInt(v.windvex_max) >= 6
        })
        if (!finalData.length) {
          ElMessage({
            message: '暂无极端天气数据',
            type: 'success',
            customClass: 'self-weather-el-message',
            showClose: true
          })
          return
        }

        for (let i = 0; i < finalData.length; i++) {
          const item = finalData[i];
          item['stationData'] = resOfStationtDict[item.station_id]
          console.log(item['stationData'], `item['stationData']`)
          // 位置可能不存在
          if (!item.stationData.station_lon || !item.stationData.station_lat) {
            continue
          }
          const iconUrl = weatherMap[item.weather_code || 'default']
          const currentMarker = L.marker([item.stationData.station_lat, item.stationData.station_lon], {
            icon: L.icon({
              iconUrl: iconUrl,
              iconSize: [30, 30],
              iconAnchor: [15, 30],
            })
          });
          insOfMarkerClusterGroupWeather.addLayer(currentMarker)
          currentMarker
            .bindPopup(`
              <div class="leaflet-self-wrapper">
                 <div class="header">${item['stationData']['station_name'] || ""}</div>
                <div class="leaflet-self-wrapper-item"><span class="bolder">风力</span>: ${item["windvex_max"] || ""
              }</div>
                <div class="leaflet-self-wrapper-item"><span class="bolder">风向</span>: ${item["winddex_max"] || ""
              }</div>
                <div class="leaflet-self-wrapper-item"><span class="bolder">天气</span>: ${item["weather_now"] || ""
              }</div>
              </div>
            `);
        }
        LayerMap['weather-report'] = insOfMarkerClusterGroupWeather.addTo(window.LeafletMapInsOfL1)
      }
    },
    // 航路路况
    renderHangLuLuKuangLayer() {
      const that = this;
      eventBus.emit("requestDataForLeaflet", {
        tag: true,
      });
      Api.getSpeedMapOfShip()
        .then((res) => {
          if (!res || !res.length) {
            return;
          }
          const map_ = {};
          for (let i = 0; i < res.length; i++) {
            if (!res[i].speedColor) {
              continue;
            }
            if (!map_[res[i].speedColor]) {
              map_[res[i].speedColor] = [[res[i].lng, res[i].lat]];
            } else {
              map_[res[i].speedColor].push([res[i].lng, res[i].lat]);
            }
          }
          const series = [];
          for (let key in map_) {
            series.push({
              name: key,
              type: "scatter",
              coordinateSystem: "leaflet",
              symbolSize: 3,
              large: true,
              itemStyle: {
                normal: {
                  shadowBlur: 1,
                  shadowColor: "rgba(255, 255, 255, 0.8)",
                  // color: 'rgba(37, 140, 249, 0.8)'
                  color: key,
                },
              },
              data: map_[key],
            });
          }
          const option = {
            series,
          };
          LayerMap["hangwu-lukuang"] = new L.supermap.EchartsLayer(option, {
            loadWhileAnimating: false,
          }).addTo(window.LeafletMapInsOfL1);
          window.LeafletMapInsOfL1.on("zoomend", that.listenZoomForLuKuang);
        })
        .finally((e) => {
          eventBus.emit("requestDataForLeaflet", {
            tag: false,
          });
        });
    },
    // 面版本
    renderHeatMapLayerArea() {
      const colorArr = ["#95BB0C", "#D9DD02", "#FEE002", "#EF9906", "#B40023"];
      const that = this;
      eventBus.emit("requestDataForLeaflet", {
        tag: true,
      });
      Api.getHotMapData()
        .then((res) => {
          if (!res || !res.length) {
            return;
          }
          // 准备重新梳理数据
          // 思路：↓
          // 将整个航路分为上中下三个大段，依据为将数据按照经纬度排列之后平均分组
          // 总共 5 种颜色
          const trunkSizeOfColor = 5;
          const resOfArrangedData = LodashSortBy(res, (o) => o.lng || 0);
          // 将河道分成多少份
          const trunkNumber = 50;
          const trunkSize = Math.ceil(resOfArrangedData.length / trunkNumber);
          const resOfTrunked = Lodashchunk(res, trunkSize);
          for (let i = 0; i < resOfTrunked.length; i++) {
            const item = resOfTrunked[i];
            const min = LodashMinBy(item, (o) => o.number || 0);
            const max = LodashMaxBy(item, (o) => o.number || 0);
            const differ = max.number - min.number;
            const size = differ / (trunkSizeOfColor - 1);
            for (let j = 0; j < item.length; j++) {
              const inner = item[j];
              const index = parseInt((inner.number - min.number) / size);
              inner["resetColor"] = colorArr[index];
            }
          }
          const PointData = LodashFlatten(resOfTrunked);
          const layers = [];
          Api.getGeoJSONDatdaOfHanglu().then(res => {
            const AreaData = res.features;
            const options = { units: 'miles' };
            for (let j = 0; j < AreaData.length; j++) {
              const item = AreaData[j];
              let minData = Infinity;
              let minDataIndex = 0;
              let from = turf.point([item.properties.centerX, item.properties.centerY]);
              for (let k = 0; k < PointData.length; k++) {
                const pointItem = PointData[k];
                let to = turf.point([pointItem.lng, pointItem.lat]);
                let distance = turf.distance(from, to, options);
                if (distance < minData) {
                  minData = distance;
                  minDataIndex = k;
                }
              }
              item['color'] = PointData[minDataIndex]['resetColor'];
            }
            // 上颜色
            for (let i = 0; i < AreaData.length; i++) {
              const item = AreaData[i];
              const layer = L.geoJSON(item, {
                style: function () {
                  return {
                    stroke: false,
                    weight: 0.5,
                    fill: true,
                    fillColor: item.color,
                    opacity: 1,
                    fillOpacity: 1
                  };
                },
              });
              layers.push(layer)
            }
            LayerMap["heatmap-of-ship"] = L.layerGroup(layers).addTo(
              window.LeafletMapInsOfL1
            );
            eventBus.emit("requestDataForLeaflet", {
              tag: false,
            });
          })

          const map_ = {};
          for (let i = 0; i < resOfArrangedData.length; i++) {
            if (!resOfArrangedData[i].resetColor) {
              continue;
            }
            if (!map_[resOfArrangedData[i].resetColor]) {
              map_[resOfArrangedData[i].resetColor] = [
                [resOfArrangedData[i].lng, resOfArrangedData[i].lat],
              ];
            } else {
              map_[resOfArrangedData[i].resetColor].push([
                resOfArrangedData[i].lng,
                resOfArrangedData[i].lat,
              ]);
            }
          }
          const series = [];
          for (let key in map_) {
            series.push({
              name: key,
              type: "scatter",
              coordinateSystem: "leaflet",
              symbolSize: 3,
              large: true,
              itemStyle: {
                normal: {
                  shadowBlur: 1,
                  shadowColor: "rgba(255, 255, 255, 0.8)",
                  // color: 'rgba(37, 140, 249, 0.8)'
                  color: key,
                },
              },
              data: map_[key],
            });
          }
          const option = {
            series,
          };
          LayerMap["heatmap-of-ship-point"] = new L.supermap.EchartsLayer(option, {
            loadWhileAnimating: false,
          }).addTo(window.LeafletMapInsOfL1);
          window.LeafletMapInsOfL1.on("zoomend", that.listenZoomForLuKuang);
        })
        .finally((e) => {
          // eventBus.emit("requestDataForLeaflet", {
          //   tag: false,
          // });
        });
    },
    // 船舶热力图 点版本
    renderHeatMapLayerPoint() {
      const colorArr = ["#95BB0C", "#D9DD02", "#FEE002", "#EF9906", "#B40023"];
      const that = this;
      eventBus.emit("requestDataForLeaflet", {
        tag: true,
      });
      Api.getHotMapData()
        .then((res) => {
          if (!res || !res.length) {
            return;
          }
          // 准备重新梳理数据
          // 思路：↓
          // 将整个航路分为上中下三个大段，依据为将数据按照经纬度排列之后平均分组
          // 总共 5 种颜色
          const trunkSizeOfColor = 5;
          const resOfArrangedData = LodashSortBy(res, (o) => o.lng || 0);
          // 将河道分成多少份
          const trunkNumber = 50;
          const trunkSize = Math.ceil(resOfArrangedData.length / trunkNumber);
          const resOfTrunked = Lodashchunk(res, trunkSize);
          for (let i = 0; i < resOfTrunked.length; i++) {
            const item = resOfTrunked[i];
            const min = LodashMinBy(item, (o) => o.number || 0);
            const max = LodashMaxBy(item, (o) => o.number || 0);
            const differ = max.number - min.number;
            const size = differ / (trunkSizeOfColor - 1);
            for (let j = 0; j < item.length; j++) {
              const inner = item[j];
              const index = parseInt((inner.number - min.number) / size);
              inner["resetColor"] = colorArr[index];
            }
          }
          const map_ = {};
          for (let i = 0; i < resOfArrangedData.length; i++) {
            if (!resOfArrangedData[i].resetColor) {
              continue;
            }
            if (!map_[resOfArrangedData[i].resetColor]) {
              map_[resOfArrangedData[i].resetColor] = [
                [resOfArrangedData[i].lng, resOfArrangedData[i].lat],
              ];
            } else {
              map_[resOfArrangedData[i].resetColor].push([
                resOfArrangedData[i].lng,
                resOfArrangedData[i].lat,
              ]);
            }
          }
          const series = [];
          for (let key in map_) {
            series.push({
              name: key,
              type: "scatter",
              coordinateSystem: "leaflet",
              symbolSize: 3,
              large: true,
              itemStyle: {
                normal: {
                  shadowBlur: 1,
                  shadowColor: "rgba(255, 255, 255, 0.8)",
                  // color: 'rgba(37, 140, 249, 0.8)'
                  color: key,
                },
              },
              data: map_[key],
            });
          }
          const option = {
            series,
          };
          LayerMap["heatmap-of-ship"] = new L.supermap.EchartsLayer(option, {
            loadWhileAnimating: false,
          }).addTo(window.LeafletMapInsOfL1);
          window.LeafletMapInsOfL1.on("zoomend", that.listenZoomForLuKuang);
        })
        .finally((e) => {
          eventBus.emit("requestDataForLeaflet", {
            tag: false,
          });
        });
    },
    // 监听地图的缩放
    listenZoomForLuKuang(e) {
      const zoomV = e.target.getZoom();
      if (LayerMap["hangwu-lukuang"]) {
        LayerMap["hangwu-lukuang"]._echartsContainer.style.opacity =
          zoomV > 9 ? 0 : 1;
      }
      if (LayerMap["heatmap-of-ship-point"]) {
        LayerMap["heatmap-of-ship-point"]._echartsContainer.style.opacity =
          zoomV > 9 ? 0 : 1;
      }
    },
    // 断面流量
    renderDuanmianLiuliangLayer() {
      if (!window.LeafletMapInsOfL1) {
        return;
      }
      Api.getDataOfDuanMianLiuliang().then((res) => {
        if (!res.length) {
          return;
        }
        const polylines = [];
        for (let i = 0; i < res.length; i++) {
          const section = res[i];
          if (!section.REGIONDATA) {
            continue;
          }
          const latlngs = [
            [section.REGIONDATA.lat1, section.REGIONDATA.lon1],
            [section.REGIONDATA.lat2, section.REGIONDATA.lon2],
          ];
          // marker-icon-2x
          const polyline = L.polyline(latlngs, {
            weight: 5,
            color: "#FF5722",
            opacity: 0.8,
          });
          const currentMarker = L.marker(
            [section.REGIONDATA.lat2, section.REGIONDATA.lon2],
            {
              icon: L.icon({
                iconUrl: "./files/images/marker-icon-2x.png",
                iconSize: [25, 41],
                iconAnchor: [12.5, 41],
              }),
            }
          );
          currentMarker.bindPopup(`
              <div class="leaflet-self-wrapper" style="width: 300px;">
                 <div class="header">${section.REGIONDATA.section_name || ""}</div>
                <div class="leaflet-self-wrapper-item"><span class="bolder" style="width: 100px;">上行流量</span>: ${section.SHIPNUMBER_UP || ""
            } （艘）</div>
            <div class="leaflet-self-wrapper-item"><span class="bolder" style="width: 100px;">下行流量</span>: ${section.SHIPNUMBER_DOWN || ""
            } （艘）</div>
                <div class="leaflet-self-wrapper-item"><span class="bolder" style="width: 100px;">日期</span>: ${section.RIQI || ""
            }</div>
              </div>
            `);
          polylines.push(polyline, currentMarker);
        }
        LayerMap["duanmian-liuliang"] = L.layerGroup(polylines).addTo(
          window.LeafletMapInsOfL1
        );
      });
    },
    // 航道通行状态
    renderChannelOpenStatusLayer() {
      if (!window.LeafletMapInsOfL1) {
        return;
      }
      const colorMap = {
        "通畅": "rgb(0, 255, 0)",
        "较畅": "rgb(255, 255, 0)",
        "拥堵": "rgb(255, 165, 0)",
        "阻塞": "rgb(255, 0, 0)",
        "默认": "rgb(255, 255, 255)",
      }
      Api.getDataOfChannelOpenStatus().then(res => {
        if (!res) { return }
        if (!res.data) { return }
        if (!res.data.data) { return }
        const resArr = res.data.data;
        if (!resArr.length) { return }
        // 设计思路见下
        // 返回的数据中 QDWZ 字段是一个面 考虑将面绘制 附带颜色 颜色值由下面的规则制定
        // 通畅 较畅 拥堵 堵塞 分别用 rgb(0, 255, 0) rgb(255, 255, 0) rgb(255, 165, 0) rgb(255,0,0) 表示
        const polygons = [];
        for (let i = 0; i < resArr.length; i++) {
          const section = resArr[i];
          if (!section.QDWZ) {
            continue
          }
          // 再处理 QDWZ 数据 转变成需要的格式
          const areaData = section.QDWZ.split('#');
          const singlePolygon = [];
          if (!areaData || !areaData.length) { continue }
          areaData.forEach(v => {
            const vTrans = v.split(',').reverse().map(v_ => { return Number(v_) })
            singlePolygon.push(vTrans)
          })
          const tag = section.TXZTPG || "默认";
          // 此处取中心的坐标 兜底坐标 取相对中间的点
          let centroid = areaData[Math.floor(areaData.length / 4)].split(',').reverse();
          // const centeroidTemp = turf.centroid(turf.polygon([singlePolygon]));
          // centroid = centeroidTemp.geometry.coordinates;

          const polygon = L.polygon(singlePolygon, {
            weight: 2,
            color: colorMap[tag],
            opacity: 0.8
          })
          const currentMarker = L.marker(
            centroid,
            {
              icon: L.icon({
                iconUrl: "./files/images/marker-icon-2x.png",
                iconSize: [25, 41],
                iconAnchor: [12.5, 41],
              })
            }
          );
          currentMarker.bindPopup(`
              <div class="leaflet-self-wrapper" style="width: 300px;">
                 <div class="header">${section.QDMC || ""}</div>
                <div class="leaflet-self-wrapper-item"><span class="bolder" style="width: 100px;">起讫位置</span>: ${section.QQWZ || ""
            } </div>
            <div class="leaflet-self-wrapper-item"><span class="bolder" style="width: 100px;">通行状态</span>: ${section.TXZTPG || ""
            } </div>
            <div class="leaflet-self-wrapper-item"><span class="bolder" style="width: 100px;">航道等级</span>: ${section.HDDJ || ""
            } （级）</div>
                <div class="leaflet-self-wrapper-item"><span class="bolder" style="width: 100px;">开始时间</span>: ${section.ZT_START_TIME || ""
            }</div>
                <div class="leaflet-self-wrapper-item"><span class="bolder" style="width: 100px;">异常原因</span>: ${section.ZT_YCYY || ""
            }</div>
              </div>
            `);
          polygons.push(polygon, currentMarker)
        }
        LayerMap['channel-open-status'] = L.layerGroup(polygons).addTo(
          window.LeafletMapInsOfL1
        )
      })
    },
    // 航道的设施状态 基本跟通行状态一致
    renderChannelEquipStatusLayer() {
      if (!window.LeafletMapInsOfL1) {
        return;
      }
      const colorMap = {
        "好": "rgb(0, 255, 0)",
        "一般": "rgb(255, 255, 0)",
        "较差": "rgb(255, 165, 0)",
        "差": "rgb(255, 0, 0)",
        "默认": "rgb(255, 255, 255)",
      }
      Api.getDataOfChannelEquipStatus().then(res => {
        if (!res) { return }
        if (!res.data) { return }
        if (!res.data.data) { return }
        const resArr = res.data.data;
        if (!resArr.length) { return }
        // 设计思路见下
        // 返回的数据中 QDWZ 字段是一个面 考虑将面绘制 附带颜色 颜色值由下面的规则制定
        // 好 一般 较差 差 分别用 rgb(0, 255, 0) rgb(255, 255, 0) rgb(255, 165, 0) rgb(255,0,0) 表示
        const polygons = [];
        for (let i = 0; i < resArr.length; i++) {
          const section = resArr[i];
          if (!section.QDWZ) {
            continue
          }
          // 再处理 QDWZ 数据 转变成需要的格式
          const areaData = section.QDWZ.split('#');
          const singlePolygon = [];
          if (!areaData || !areaData.length) { continue }
          areaData.forEach(v => {
            const vTrans = v.split(',').reverse().map(v_ => { return Number(v_) })
            singlePolygon.push(vTrans)
          })
          const tag = section.SSZTPG || "默认";
          // 此处取中心的坐标 兜底坐标
          let centroid = areaData[Math.floor(areaData.length / 4)].split(',').reverse();
          // const centeroidTemp = turf.centroid(turf.polygon([singlePolygon]));
          // centroid = centeroidTemp.geometry.coordinates;

          const polygon = L.polygon(singlePolygon, {
            weight: 2,
            color: colorMap[tag],
            opacity: 0.8
          })
          const currentMarker = L.marker(
            centroid,
            {
              icon: L.icon({
                iconUrl: "./files/images/marker-icon-2x.png",
                iconSize: [25, 41],
                iconAnchor: [12.5, 41],
              })
            }
          );
          currentMarker.bindPopup(`
              <div class="leaflet-self-wrapper" style="width: 300px;">
                 <div class="header">${section.QDMC || ""}</div>
                <div class="leaflet-self-wrapper-item"><span class="bolder" style="width: 100px;">起讫位置</span>: ${section.QQWZ || ""
            } </div>
            <div class="leaflet-self-wrapper-item"><span class="bolder" style="width: 100px;">设施状态</span>: ${section.SSZTPG || ""
            } </div>
            <div class="leaflet-self-wrapper-item"><span class="bolder" style="width: 100px;">航道等级</span>: ${section.HDDJ || ""
            } （级）</div>
                <div class="leaflet-self-wrapper-item"><span class="bolder" style="width: 100px;">开始时间</span>: ${section.SS_START_TIME || ""
            }</div>
                <div class="leaflet-self-wrapper-item"><span class="bolder" style="width: 100px;">异常原因</span>: ${section.SS_YCYY || ""
            }</div>
              </div>
            `);
          polygons.push(polygon, currentMarker)
        }
        LayerMap['channel-equip-status'] = L.layerGroup(polygons).addTo(
          window.LeafletMapInsOfL1
        )
      })
    },
    // 应急事件
    renderYingjiShijianLayer() {
      if (!window.LeafletMapInsOfL1) { return }
      Api.getDataOfPublicEvent().then(res => {
        if (!res || !res.data || !res.data.data) { return }
        // 过滤出含有经纬度的数据
        const filterData = res.data.data.filter(v => {
          return v.ZBJD && v.ZBWD
        });
        const markers = []
        for (let i = 0; i < filterData.length; i++) {
          const item = filterData[i];
          const currentMarker = L.marker([item.ZBWD, item.ZBJD], {
            icon: L.icon({
              iconUrl: './files/images/icon-alarm.png',
              iconSize: [40, 40],
              iconAnchor: [20, 40],
            })
          });
          markers.push(currentMarker)
          currentMarker
            .bindPopup(`
              <div class="leaflet-self-wrapper">
                <div class="header"> ${item.SJBT || ''}</div>
                <div class="leaflet-self-wrapper-item serverInfo" ><span class="bolder" style="width: 100px;">事件概况</span>: 
                  <div class="wrapper-indent">
                    ${item.SJGK}
                  </div>  
                </div>
                <div class="leaflet-self-wrapper-item"><span class="bolder" style="width: 100px;">联系人</span>: ${item.LXR || ''}</div>
                <div class="leaflet-self-wrapper-item serverInfo"><span class="bolder" style="width: 100px;">联系电话</span>:
                    <div class="wrapper-indent">
                       ${item.LXDH || ''}
                  </div>
                   </div>
                <div class="leaflet-self-wrapper-item serverInfo"><span class="bolder" style="width: 100px;">处置情况</span>: 
                  <div class="wrapper-indent">
                    ${item.CZQK}
                  </div>
                </div>

                <div class="leaflet-self-wrapper-item serverInfo"><span class="bolder" style="width: 100px;">现场环境</span>: 
                  <div class="wrapper-indent">
                    ${item.XCHJZK}
                  </div>
                </div>
              </div>
            `);
        }
        // layer
        LayerMap['yingji-shijian'] = L.layerGroup(markers).addTo(window.LeafletMapInsOfL1)
      })
    },
    // 航标碰撞
    renderHangBiaoPengzhuangLayer() {
      Api.getDataOfTop20Crashed().then((res) => {
        if (!res.success) {
          return;
        }
        if (!res.data) {
          return;
        }
        if (!res.data.data) {
          return;
        }
        if (!L) {
          return;
        }
        if (!window.LeafletMapInsOfL1) {
          return;
        }
        const markers = [];
        for (let i = 0; i < res.data.data.length; i++) {
          const item = res.data.data[i];
          const currentMarker = L.marker([item.jdzbwd, item.jdzbjd], {
            icon: L.icon({
              iconUrl: `./files/images/crash/${item.hbtb_id || 'A-undefined'}.png`,
              iconSize: [40, 40],
              iconAnchor: [20, 20],
            }),
          });
          markers.push(currentMarker);

          currentMarker.bindPopup(`
              <div class="leaflet-self-wrapper">
                <div class="header">${item.name || ""}</div>
                <div class="leaflet-self-wrapper-item serverInfo"><span class="bolder">浮标名称</span>:
                     <div class="wrapper-indent">
                   ${item.hbmc || ""}
                   </div>
                   </div>
                <div class="leaflet-self-wrapper-item"><span class="bolder">数量</span>: ${item.count || ""
            }</div>
                </div>
            `);
        }
        // layer
        LayerMap["hangbiao-pengzhuang"] = L.layerGroup(markers).addTo(
          window.LeafletMapInsOfL1
        );
      });
    }
  },
};
</script>
<style>
/* 加大组件的尺寸 */
.count-component .el-checkbox {
  --el-checkbox-input-height: 18px;
  --el-checkbox-input-width: 18px;
}

.count-component .el-checkbox__inner::after {
  height: 10px;
  width: 4px;
  left: 5px;
  top: 0px;
}

.count-component>.search-part .el-input__inner {
  color: #fff;
}
.count-component>.search-part .el-input__inner::placeholder {
  color: #fff;
}

.count-component>.search-part .el-input__wrapper {
  background-color: rgba(66, 244, 255, 0.21);
}

.el-notification.self-Notification {
  border-radius: 0;
  background-color: #474747;
}

/* tree 组件多行显示 */
.self-tree-L1 .el-tree-node {
  white-space: normal;
  line-height: 2.5;
}

.self-tree-L1 .el-tree-node .el-tree-node__content {
  height: 100%;
}

.self-tree-L1 .el-tree-node .el-tree-node__content:hover {
  background-color: rgba(67, 211, 230, 0.3);
}

.AreaWaterSVGClass {
  stroke-dasharray: 10, 5;
  stroke-dashoffset: 0;
  stroke: #f44336;
  stroke-width: 4px;
  animation: moving-line 3s linear infinite;
}

@keyframes moving-line {
  100% {
    stroke-dashoffset: 30px;
  }
}

.self-tabs {
  position: absolute;
  width: 100%;
}

.self-tabs .el-tabs__nav-scroll {
  padding-left: 70px;
}

.leaflet-popup {
  bottom: 20px !important;
}

#Map-ChangJiang .leaflet-popup-content-wrapper {
  border-radius: 15px;

}

.pop_content {
  max-height: 260px;
  overflow-y: auto;
  padding: 10px 0;
}

.pop_content::-webkit-scrollbar-track {
  background: transparent;
}

.pop_content::-webkit-scrollbar-thumb {
  background-image: linear-gradient(to bottom, #278db8, #0c435a);
  opacity: 0.9;
  border-radius: 15px;
}


#Map-ChangJiang .leaflet-popup-content-wrapper .leaflet-self-wrapper {
  font-size: 16px;
}

.leaflet-popup-content-wrapper {
  background-image: linear-gradient(to bottom, #278db8, #0c435a);
  opacity: 0.9;
}

.leaflet-popup-content {
  color: #fff;
}

.leaflet-popup-tip {
  background: linear-gradient(to bottom, #278db8, #0c435a);
}

#Map-ChangJiang .leaflet-popup-content-wrapper .leaflet-self-wrapper-item {
  line-height: 1.8;
  font-size: 14px;
}

#Map-ChangJiang .leaflet-popup-content-wrapper .leaflet-self-wrapper-item {
  border-bottom: 1px dashed #9799a3;
  padding: 3px 0px;
}

#Map-ChangJiang .leaflet-popup-content-wrapper .leaflet-self-wrapper-item:last-child {
  border-bottom: none;
}

.serverInfo {
  display: flex;
}

#Map-ChangJiang .leaflet-popup-content-wrapper .leaflet-self-wrapper-item .bolder {
  font-weight: bolder;
  font-size: 14px;
  color: #e5e2e2;
  display: inline-block;
  width: 60px;
  text-align: justify;
  text-align-last: justify;
  margin-right: 5px;
}

.itemWord {
  width: 80px !important;
}

#Map-ChangJiang .leaflet-popup-content-wrapper .leaflet-self-wrapper-item .wrapper-indent {
  max-height: 100px;
  overflow-y: auto;
  flex: 1;
  cursor: pointer;
}

.wrapper-indent::-webkit-scrollbar-track {
  background: transparent;
}

.wrapper-indent::-webkit-scrollbar-thumb {
  background-image: linear-gradient(to bottom, #278db8, #0c435a);
  opacity: 0.9;
}

.header {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  height: 40px;
  font-size: 20px;
  border-bottom: 1px solid rgb(92, 164, 248);
}

.el-tabs__item.is-active {
  color: #fff;
  border-radius: 20px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

.el-tabs__active-bar {
  background-color: transparent !important;
}

.el-tabs__nav-scroll {
  padding-top: 10px;
  padding-bottom: 10px;
}

.leaflet-container a.leaflet-popup-close-button {
  font-size: 20px;
  color: #fff;
  width: 38px;
  height: 23px;
}
</style>

<style lang="less" scoped>
.count-component {
  &>.search-part {
    margin: 0 20px;
    position: relative;
  }
}

.title-area {
  display: inline-flex;
  align-items: center;
  font-size: 14px;
  color: #fff;
  font-weight: bolder;
  padding-left: 10px;
}

.node-counts {
  color: #43D3E6;
}

:deep(.el-checkbox__inner) {
  width: 14px;
  height: 14px;
  border: 1px solid #43D3E6;
  border-radius: 0;
  box-shadow: inset 0 0 3px #43D3E6;
}

:deep(.el-checkbox__input.is-disabled .el-checkbox__inner) {
  border: 1px solid #fff;
}

:deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
  //选中
  border-color: #43D3E6 !important;
  background-color: transparent;

  &::after {
    // 里面的对钩
    border-color: #43D3E6;
  }
}

:deep(.el-checkbox__input.is-indeterminate .el-checkbox__inner) {
  border-color: #43D3E6 !important;
  background-color: transparent;

  &::after {
    // 里面的对钩
    border-color: #fff;
    height: 7px;
    width: 5px;
    left: 5px;
    top: 3px;
  }
}
</style>
